<script setup>
import {ref,onMounted} from "vue"
import axios from "axios"
import animeModel4 from "../../components/animeModel4.vue"

const myGoVideoUrl = ref("")

const myGoVideoUrl1 = ref("")
const myGoVideoUrl2 = ref("")
const myGoVideoUrl3 = ref("")
const myGoVideoUrl4 = ref("")
const myGoVideoUrl5 = ref("")
const myGoVideoUrl6 = ref("")
const myGoVideoUrl7 = ref("")
const myGoVideoUrl8 = ref("")
const myGoVideoUrl9 = ref("")
const myGoVideoUrl10 = ref("")
const myGoVideoUrl11 = ref("")
const myGoVideoUrl12 = ref("")

const fan1_image = ref("../../public/images/anime/mygo/mygo_ji1.webp")
const fan2_image = ref("../../public/images/anime/mygo/mygo_ji2.webp")
const fan3_image = ref("../../public/images/anime/mygo/mygo_ji3.webp")
const fan4_image = ref("../../public/images/anime/mygo/mygo_ji4.webp")
const fan5_image = ref("../../public/images/anime/mygo/mygo_ji5.webp")
const fan6_image = ref("../../public/images/anime/mygo/mygo_ji6.webp")
const fan7_image = ref("../../public/images/anime/mygo/mygo_ji7.webp")
const fan8_image = ref("../../public/images/anime/mygo/mygo_ji8.webp")
const fan9_image = ref("../../public/images/anime/mygo/mygo_ji9.webp")
const fan10_image = ref("../../public/images/anime/mygo/mygo_ji10.webp")
const fan11_image = ref("../../public/images/anime/mygo/mygo_ji11.webp")
const fan12_image = ref("../../public/images/anime/mygo/mygo_ji12.webp")
const fan13_image = ref("../../public/images/anime/mygo/mygo_ji13.webp")

const model4Back = ref("../../public/images/anime/mygo_master.png")

onMounted(()=>{
    document.title = "It's MyGo!!!! - 番剧|EvenSO"
})

axios.get("/go1-api/anime/mygo").then(async res=>{
    console.log(res.data[0].anime_msg)
    myGoVideoUrl.value = await res.data[0].anime_msg[0].fan_player

    //番剧
    myGoVideoUrl1.value = await res.data[0].anime_msg[0].fan_player
    myGoVideoUrl2.value = await res.data[0].anime_msg[1].fan_player
    myGoVideoUrl3.value = await res.data[0].anime_msg[2].fan_player
    myGoVideoUrl4.value = await res.data[0].anime_msg[3].fan_player
    myGoVideoUrl5.value = await res.data[0].anime_msg[4].fan_player
    myGoVideoUrl6.value = await res.data[0].anime_msg[5].fan_player
    myGoVideoUrl7.value = await res.data[0].anime_msg[6].fan_player
    myGoVideoUrl8.value = await res.data[0].anime_msg[7].fan_player
    myGoVideoUrl9.value = await res.data[0].anime_msg[8].fan_player
    myGoVideoUrl10.value = await res.data[0].anime_msg[9].fan_player
    myGoVideoUrl11.value = await res.data[0].anime_msg[10].fan_player
    myGoVideoUrl12.value = await res.data[0].anime_msg[11].fan_player
}).catch(err=> console.log(err))

</script>

<template>
    <div class="mygoVideoAll">
        <div class="dialogBoxColor"></div>
        <div class="myGoVideoMasterBox">
            
            <animeModel4 
            :backImage="model4Back"

            :fan1VideoUrl="myGoVideoUrl1"
            :fan2VideoUrl="myGoVideoUrl2"
            :fan3VideoUrl="myGoVideoUrl3"
            :fan4VideoUrl="myGoVideoUrl4"
            :fan5VideoUrl="myGoVideoUrl5"
            :fan6VideoUrl="myGoVideoUrl6"
            :fan7VideoUrl="myGoVideoUrl7"
            :fan8VideoUrl="myGoVideoUrl8"
            :fan9VideoUrl="myGoVideoUrl9"
            :fan10VideoUrl="myGoVideoUrl10"
            :fan11VideoUrl="myGoVideoUrl11"
            :fan12VideoUrl="myGoVideoUrl12"
            :fan13VideoUrl="myGoVideoUrl13"

            :fan1ImageUrl="fan1_image"
            :fan2ImageUrl="fan2_image"
            :fan3ImageUrl="fan3_image"
            :fan4ImageUrl="fan4_image"
            :fan5ImageUrl="fan5_image"
            :fan6ImageUrl="fan6_image"
            :fan7ImageUrl="fan7_image"
            :fan8ImageUrl="fan8_image"
            :fan9ImageUrl="fan9_image"
            :fan10ImageUrl="fan10_image"
            :fan11ImageUrl="fan11_image"
            :fan12ImageUrl="fan12_image"
            :fan13ImageUrl="fan13_image"
            />
        </div>
    </div>
</template>

<style scoped>
.mygoVideoAll{
    position: absolute;
    left: 0;
    top: 0;
    width: 1855px;
    height: 100%;
    /* background-color: red; */
    /* overflow: hidden; */
}
.dialogBoxColor{
    width: 100%;
    height: 6%;
    background: linear-gradient(to right,rgb(199,195,198),rgb(184,151,130),
    rgb(157,141,154),rgb(217,188,195),rgb(99,77,81));
}
.myGoVideoMasterBox{
    width: 100%;
    height: 70%;
    overflow: hidden;
}
.myGoVideoMasterBox img{
    width: 100%;
    height: 200%;
}
</style>